<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb style="margin-top: 10px; margin-bottom: 20px; margin-left: 25px;">
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      <el-breadcrumb-item>疫情数据管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片区域-->
    <el-card>
      <!--搜索与添加区域-->
      <el-row :gutter="20">
        <!--搜索框-->
        <el-col :span="7" style="margin-bottom: 20px;">
          <el-input v-model="selectBy" placeholder="请输入数据信息进行查询" clearable @clear="getUserList"
            :default-value="timeDefaultShow">
            <el-button slot="append" icon="el-icon-search" @click="selectByUsername(selectBy)"></el-button>
          </el-input>
        </el-col>
        <!--添加用户按钮-->
        <el-col :span="4">
          <el-button type="primary" @click.native.prevent="addUserdialogVisible = true">添加数据信息</el-button>
          <el-dialog title="添加用户" :visible.sync="addUserdialogVisible" width="50%" @close="addUserDialogClosed()">
            <!--添加用户信息对话框的主体-->
            <el-form :model="addUserForm" :rules="addUserRules" ref="addUserFormRef" label-width="90px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="addUserForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="addUserForm.password" disabled></el-input>
              </el-form-item>
              <el-form-item label="权限管理" prop="role_name">
                <el-input v-model="addUserForm.role_name" disabled></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addUserdialogVisible = false">取 消</el-button>
              <el-button type="primary" @click.native.prevent="addUser(addUserForm.username)">确 定</el-button>
            </span>
          </el-dialog>
        </el-col>
      </el-row>

      <!--用户列表区域-->
      <el-table :data="userList.slice((pagenum-1)*pagesize,pagenum*pagesize)" :border="true" stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="角色" prop="role"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button type="primary" icon="el-icon-edit" size="mini"
              @click="updateUserpasswordbutton(scope.row.username)"></el-button>
            <!--修改用户信息对话框-->
            <el-dialog title="修改用户密码" :visible.sync="updateUserpassworddialogVisible" width="50%"
              @close="updateUserpassworddialog()">
              <!--修改用户信息对话框的主体-->
              <el-form :model="updateUserpasswordForm" :rules="updateUserpasswordFormRules"
                ref="updateUserpasswordFormRef" label-width="90px">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="updateUserpasswordForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="updateUserpasswordForm.password"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="updateUserpassworddialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.native.prevent="updateUser()">确 定</el-button>
              </span>
            </el-dialog>
            <!--删除按钮-->
            <el-button type="danger" icon="el-icon-delete" size="mini"
              @click.native.prevent="deleteUser(scope.row.username)"></el-button>
            <!--图书借阅功能按钮-->
            <el-tooltip effect="dark" content="允许该用户进行登录" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini"
                @click="updateUserRolebutton(scope.row.username)"></el-button>
            </el-tooltip>
            <el-dialog title="修改用户登录权限" :visible.sync="updateUserRoledialogVisible" width="50%"
              @close="updateUserRoledialog()">
              <!--修改用户权限对话框的主体-->
              <el-form :model="updateUserRoleForm" :rules="updateUserRoleFormRules" ref="updateUserRoleFormRef"
                label-width="90px">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="updateUserRoleForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="权限" prop="id">
                  <el-select v-model="updateUserRoleForm.id" placeholder="请选择权限">
                    <el-option label="允许登录" value="1"></el-option>
                    <el-option label="无权限登录" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="updateUserRoledialogVisible = false">取 消</el-button>
                <el-button type="primary" @click.native.prevent="updateUserRole()">确 定</el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

      <!--分页区域-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
        :page-sizes="[1,2,5,10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
  import {
    AddNoticeInfoAPI,
    GetNoticeInfoListAPI,
    RemoveNoticeInfoAPI,
    UpdateNoticeInfoAPI
  } from '@/components/utils/api/notice_api.js'
  export default {
    data() {
      return {
        selectBy: '',
        userList: [],
        timeDefaultShow: '',
        total: 0,
        pagesize: 10,
        pagenum: 1,


        // 增加用户数据
        addUserdialogVisible: false,
        addUserForm: { username: '', password: '默认为123456', role_name: '默认为学生' },
        addUserRules: {
          username: [{
            required: true, message: '请输入用户名', trigger: 'blur'
          }]
        },
        // 修改用户密码数据
        updateUserpassworddialogVisible: false,
        updateUserpasswordForm: { username: '', password: '' },
        updateUserpasswordFormRules: {},
        // 修改用户权限数据
        updateUserRoledialogVisible: false,
        updateUserRoleForm: { username: '', id: '' },
        updateUserRoleFormRules: {}
      }
    },
    created() {
      this.getUserList()
      this.getdayValue()
    },
    methods: {

      getdayValue() {
        this.timeDefaultShow = new Date()
      },

      // 获取用户列表
      async getUserList() {
        const getUserresult = await this.$http.get('/user/select')
        if (getUserresult == null) return this.$message.error('获取用户列表失败')
        this.userList = getUserresult.data.data.roleList
        this.total = this.userList.length
      },

      // 查询用户信息按钮
      async selectByUsername(id) {
        const selectByUsernameresult = await this.$http.get('/user/selectByUsername',
          { params: { username: id } })
        this.userList = selectByUsernameresult.data.data.roleList
      },

      // 删除按钮事件
      async deleteUser(id) {
        const deleteres = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (deleteres !== 'confirm') {
          return this.$message.info('已取消删除')
        }
        const deleteres1 = await this.$http.delete('/user/delete', {
          params: { username: id },
          data: {
            username: id
          }
        })
        if (deleteres1.data.code == 20001) return this.$message.error(deleteres1.data.msg)
        this.$message.success(deleteres1.data.msg)
        this.getUserList()
      },

      // 重置添加用户信息对话框
      addUserDialogClosed() {
        this.$refs.addUserFormRef.resetFields()
      },
      // 重置修改用户密码对话框
      updateUserpassworddialog() {
        this.$refs.updateUserpasswordFormRef.resetFields()
      },
      // 重置修改用户权限对话框
      updateUserRoledialog() {
        this.$refs.updateUserRoleFormRef.resetFields()
      },

      // 添加用户
      async addUser(id) {
        const params = new URLSearchParams
        params.append('username', id)
        this.addUserdialogVisible = false
        const res = await this.$http.post('/user/insert', params)
        if (res == null) return this.$message.error('添加用户失败')
        if (res.data.code != 20000) return this.$message.error(res.data.msg)
        this.$message.success(res.data.msg)
        this.getUserList()
      },

      // 修改用户密码
      async updateUser() {
        const params = new URLSearchParams
        params.append('username', this.updateUserpasswordForm.username)
        params.append('password', this.updateUserpasswordForm.password)
        const updateUserres = await this.$http.post('/user/updatePassword', params)
        if (updateUserres.data.code != 20000) return this.$message.error('修改用户密码失败')
        this.$message.success(updateUserres.data.msg)
        this.updateUserpassworddialogVisible = false
      },

      //修改用户密码时获取该用户账号
      updateUserpasswordbutton(id) {
        this.updateUserpassworddialogVisible = true
        this.updateUserpasswordForm.username = id
      },

      //修改用户权限
      async updateUserRole() {
        const updateUserRoleparams = new URLSearchParams
        updateUserRoleparams.append('username', this.updateUserRoleForm.username)
        updateUserRoleparams.append('id', this.updateUserRoleForm.id)
        const updateUserRoleres = await this.$http.post('/user/updatePermission', updateUserRoleparams)
        console.log(updateUserRoleres)
        if (updateUserRoleres.data.code != 20000) return this.$message.error('修改用户权限失败')
        this.$message.success(updateUserRoleres.data.msg)
        this.updateUserRoledialogVisible = false
        this.getUserList()
      },
      // 修改用户权限时获取该用户账号
      updateUserRolebutton(id) {
        this.updateUserRoledialogVisible = true
        this.updateUserRoleForm.username = id
      },

      //监听pagesize改变的事件
      handleSizeChange(newSize) {
        this.pagesize = newSize
      },

      //监听页码值改变的事件
      handleCurrentChange(newPage) {
        this.pagenum = newPage
      },

    }
  }
</script>